import React, { useState, useEffect } from 'react';
import { Card, Typography, Tag } from 'antd';
import { TagTwoTone } from '@ant-design/icons';
import css from './index.module.less';

export default function Blog(props) {
  const { Paragraph, Text } = Typography;

  // 适配界面大小
  const [adapt, setAdapt] = useState(true);
  // 当前界面的宽度
  const [width, setWidth] = useState(window.innerWidth);

  const watchResize = () => {
    setWidth(window.innerWidth);
    if (window.innerWidth < 770) {
      console.log("1: ",window.innerWidth);
      setAdapt(false);
    } else{
      setAdapt(true);
    }
  };

  useEffect(() => {
    window.addEventListener("resize", watchResize);

    return () => window.removeEventListener("resize", watchResize);
  }, [window.innerWidth]);

  const dimg = {
    width: width / 6,
    height: width / 8,
    display: "block",
  };

  const cimg = {
    width: "100%",
    height: width / 2.5,
  };

  const blog = {
    position: "absolute",
    marginLeft: width / 6 + 20,
    top: 20,
    fontSize: "16px",
  };

  const colors = ["magenta", "red", "volcano", "orange", "green", "yellow", "blue", "gold"];
  return (
    <>
     <Card
        hoverable
        className={css.card}
      >
				 <img style={adapt? dimg: cimg}
							src={props.data.blog.img !== null? props.data.blog.img :"https://zzzzzzzzzzzzzzzzzzzzzzzzz.oss-cn-hangzhou.aliyuncs.com/QQ%E5%9B%BE%E7%89%87.jpg"}
				 />
				 <div style={adapt? blog: {}} className={css.content}>
					 <h1 className={css.title}>{props.data.blog.title}</h1>
					 <div className={css.category}>
						 <TagTwoTone style={{marginRight: '10px'}}/>
						 {props.data.categories.length === 0? "" : props.data.categories.map((category, index) => {
						 return (
							 <Tag color={colors[Math.round(Math.random() * colors.length)]} key={index}>
								 <span>{category.title} </span>
							 </Tag>
						 )
					 })}</div>
					 <Paragraph style={{width: "50%"}}
								ellipsis={
									{
										rows: 5,
									}
								}
					 >
						 {props.data.blog.content}
					 </Paragraph>
				 </div>
      </Card>
    </>
  );
}
